<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生基本信息</title>
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="../js/jquery.min.js"></script>
    <style>
        /*设置背景*/
        body{
            background-color: #ebf1eb;
        }
        /*最上方图片居中*/
        #img_two_1{
            height: 113px;
            width: 455px;
            margin: auto;
            margin-bottom: 50px;
        }
        /*表格样式*/
        #tab_tow_table{
            width: 500px;
            font-size: 17px;
            margin: auto;
        }
        tr{
           height: 50px;
        }
    </style>
    <script>
        $(function () {
            //页面加载完成后，向后台发送ajax请求，查询学生基本信息
            $.get("stu/getStudent",{},function (data) {
                //将得到的json对象填到相应的位置
                var stu = '<tr class="success">\n' +
                    '            <th>类型</th>\n' +
                    '            <th>信息</th>\n' +
                    '        </tr>\n' +
                    '        <tr class="info">\n' +
                    '            <td>学号</td>\n' +
                    '            <td>'+data.sid+'</td>\n' +
                    '        </tr>\n' +
                    '        <tr class="active">\n' +
                    '            <td>姓名</td>\n' +
                    '            <td>'+data.sname+'</td>\n' +
                    '        </tr>\n' +
                    '        <tr class="info">\n' +
                    '            <td>性别</td>\n' +
                    '            <td>'+data.gender+'</td>\n' +
                    '        </tr>\n' +
                    '        <tr class="active">\n' +
                    '            <td>班级</td>\n' +
                    '            <td>'+data.squad+'</td>\n' +
                    '        </tr>\n' +
                    '        <tr class="info">\n' +
                    '            <td>邮箱</td>\n' +
                    '            <td>'+data.email+'</td>\n' +
                    '        </tr>\n' +
                    '        <tr class="active">\n' +
                    '            <td>手机号</td>\n' +
                    '            <td>'+data.phone+'</td>\n' +
                    '        </tr>\n' +
                    '        <tr class="info">\n' +
                    '            <td>楼栋号</td>\n' +
                    '            <td>'+data.building+'</td>\n' +
                    '        </tr>\n' +
                    '        <tr class="active">\n' +
                    '            <td>房间号</td>\n' +
                    '            <td>'+data.room+'</td>\n' +
                    '        </tr>\n' +
                    '        <tr class="info">\n' +
                    '            <td>床号</td>\n' +
                    '            <td>'+data.bed+'</td>\n' +
                    '        </tr>\n' +
                    '        <tr class="active">\n' +
                    '            <td>电费</td>\n' +
                    '            <td>'+data.charge+'</td>\n' +
                    '        </tr>' ;

                //将拼接好的字符串放入table标签体中
                $("#tab_tow_table").html(stu);
            },"json");
        });
    </script>


</head>
<body>

    <div id="img_two_1"><img src="../img/stu_3.png" id="img_hint"></div>

    <table class="table table-hover" id="tab_tow_table">
<!--        <tr class="success">-->
<!--            <th>字段</th>-->
<!--            <th>信息</th>-->
<!--        </tr>-->
<!--        <tr class="info">-->
<!--            <td>学号</td>-->
<!--            <td>1234567458698</td>-->
<!--        </tr>-->
<!--        <tr class="active">-->
<!--            <td>姓名</td>-->
<!--            <td>张三</td>-->
<!--        </tr>-->
<!--        <tr class="info">-->
<!--            <td>性别</td>-->
<!--            <td>男</td>-->
<!--        </tr>-->
<!--        <tr class="active">-->
<!--            <td>班级</td>-->
<!--            <td>物联1703班</td>-->
<!--        </tr>-->
<!--        <tr class="info">-->
<!--            <td>邮箱</td>-->
<!--            <td>1257304477@qq.com</td>-->
<!--        </tr>-->
<!--        <tr class="active">-->
<!--            <td>手机号</td>-->
<!--            <td>15973624233</td>-->
<!--        </tr>-->
<!--        <tr class="info">-->
<!--            <td>楼栋号</td>-->
<!--            <td>61</td>-->
<!--        </tr>-->
<!--        <tr class="active">-->
<!--            <td>房间号</td>-->
<!--            <td>503</td>-->
<!--        </tr>-->
<!--        <tr class="info">-->
<!--            <td>床号</td>-->
<!--            <td>3</td>-->
<!--        </tr>-->
    </table>

    <div style="float: right;margin-right: 150px">
        <a href="stu_main_page.html" class="btn btn-info">返回主界面</a>
    </div>
</body>
</html>